Understanding Inline-Block Elements
Description
The inline-block value mixes block and inline characteristics.
The outside of the box is treated like an inline element. Therefore no new line is created for the element.
The inside of the box is treated like a block element, and properties such as width, height, and margin are applied.
Example
The following code shows how to use the inline-block Value.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!--from w w w.j a va 2 s. c om-->
display: inline;
}
span {
display: inline-block;
border: medium double black;
margin: 2em;
width: 10em;
height: 2em;
}
</style>
</head>
<body>
<p>This is a test.</p>
<p>This is a test. <span>This is a test.</span>
</p>
</body>
</html>